<template>
  <div class="projecte_charts">
    <VEcharts
      autoresize
      :options="options"
      style="width: 100%; height: 100%"
    />
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';

export default {
  name: 'ProjecteCharts',
  components: {
    VEcharts
  },
  props: {
    title: {
      type: String,
      default: () => ''
    },
    mouthData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    };
  },
  computed: {
    options() {
      const obj = {
        title: {
          text: `${this.title}每月支出情况`,
          subtext: '单位: 万元',
          x: 100
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          // axisLine: {// x轴样式
          //   show: true,
          //   lineStyle: {
          //     color: '#00c7ff',
          //     width: 1,
          //     type: 'solid'
          //   }
          // }
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {// 鼠标滑上去显示效果
          trigger: 'item'
        },
        series: [{
          // data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70],
          data: this.mouthData,
          type: 'bar',
          itemStyle: {
            normal: {
              // 这里是重点
              color: ['#73A0FA']
            }
          }
        }]
      };
      return obj;
    }
  }
};
</script>

<style lang="scss" scoped>
  .projecte_charts{
    height: 100%;
    width: 100%;
    padding-top: 20px;
  }
</style>

